<!--预览文件-->
<template>
  <div id="popupbody" v-if="dialogVisible">
    <div class="popupbody-box" ref="dialogBox">
      <div class="popupbody-title">
        <span>预览文件</span>
        <span class="el-icon-close" @click="closePOpup"></span>
      </div>
      <div class="popupbody-boxin" style="padding:5px;">
        <div class="weekclass-body" ref="pdf" v-if="!isPdf">
          <iframe frameborder=0 name="showHere" scrolling=auto :src="iframeSrcLine" class="iframeBoxLine"></iframe>
          <!--          <iframe class="iframeBoxLine" src="https://view.officeapps.live.com/op/embed.aspx?src=http%3A%2F%2Fdoctext%2Elayoxx%2Ecom%3A80%2Fuploads%2Foffice%2F20220323%2F20220323150451%2Edocx&amp;wdPrint=1&amp;wdStartOn=1&amp;wdEmbedCode=0" frameborder="0"></iframe> -->
        </div>
        <div v-else>
          <p class="arrow">
            <!--            // 上一页-->
            <span @click="changePdfPage(0)" class="turn" :class="{grey: currentPage==1}">Preview</span>
            {{ currentPage }} / {{ pageCount }}
            <!--            // 下一页-->
            <span @click="changePdfPage(1)" class="turn" :class="{grey: currentPage==pageCount}">Next</span>
          </p>
          <!--          // 自己引入就可以使用,这里我的需求是做了分页功能,如果不需要分页功能,只要src就可以了-->
          <pdf
            :src="src"
            :page="currentPage"
            @num-pages="pageCount=$event"
            @page-loaded="currentPage=$event"
            @loaded="loadPdfHandler">
          </pdf>
        </div>
      </div>
      <div class="popupbody-footer">
        <el-button size="small" @click="closePOpup">返回</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import pdf from 'vue-pdf'

export default {
  name: 'studentMultiple',
  props: ['visible', 'iframeSrc'],
  components: {pdf},
  data() {
    return {
      dialogVisible: this.visible,
      iframeSrcLine: '',
      tableHeight: 100,
      isPdf: false,
      currentPage: 0, // pdf文件页码
      pageCount: 0, // pdf文件总页数
      src: '', // pdf文件地址
    }
  },
  watch: {
    visible() {
      this.dialogVisible = this.visible
      if (this.visible) {
        let n = this;
        // 添加iframeSrc的空值检查
        if (this.iframeSrc && this.iframeSrc.indexOf('.pdf') == -1) {
          this.$nextTick(() => {
            if (n.$refs.dialogBox) {
              let height = n.$refs.dialogBox.offsetHeight;  //top 50 1 search 50 page 50 10 footer 50 1
              this.tableHeight = height - (65 + 56 + 20)
            }
          })
          console.log('iframeSrc====>', this.iframeSrc)
        } else if (this.iframeSrc) {
          this.isPdf = true
        }
        this.getHttpFn()
      } else {
        this.iframeSrcLine = ''
        this.src = ''
        this.isPdf = false
      }
    }
  },
  created() {
  },
  methods: {
    // 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
    changePdfPage(val) {
      if (val === 0 && this.currentPage > 1) {
        this.currentPage--
      }
      if (val === 1 && this.currentPage < this.pageCount) {
        this.currentPage++
      }
    },
    // pdf加载时
    loadPdfHandler(e) {
      this.currentPage = 1 // 加载的时候先加载第一页
    },
    async getHttpFn() {
      try {
        if (this.iframeSrc) {
          // 判断是否为PDF文件
          this.isPdf = this.iframeSrc.toLowerCase().indexOf('.pdf') !== -1
          
          if (this.isPdf) {
            // PDF文件直接使用vue-pdf组件预览
            this.src = this.iframeSrc
          } else {
            // 对于非PDF文件，直接使用文件URL进行简单预览
            this.iframeSrcLine = this.iframeSrc
          }
        }
      } catch (error) {
        console.error('预览加载错误:', error)
        this.$message.error('预览加载失败，请尝试下载文件查看')
      }
    },

    // 关闭弹窗
    closePOpup() {
      this.$emit('update:visible', false)
    },
  },
  mounted() {
  }
}
</script>
<style scoped>
.popupbody-boxin {
  min-width: 750px;
}

.weekclass-body {
  height: 550px;
  overflow: hidden;
}

/*48 40 24*/
.iframeBoxLine {
  width: 100%;
  height: 100%;
  /*height: 674px;*/
  /*margin-top: -98px;*/
}
</style>
